<template>
	<view class="h-full" style="color: #9FA6B5;">
		<u-navbar :title="$t('zichan.huazhuan')" :bgColor="config.bg" :titleStyle="{color:config.color}" :leftIconColor="config.color"
			placeholder autoBack>
			<template #right>
				<navigator url="">
					<view class="iconfont icon-Tab_lishijilu text-xl"></view>
				</navigator>
			</template>
		</u-navbar>
		<view class="p-8">
			<view>
				<view >{{$t('huazhuan.cong')}}</view>
				<view class="text-lg text-white flex gap-2" @click="selectpicker('top')">
					{{action.list[0][action.index].name}} 
					<u-icon name="arrow-right" color="#9FA6B5" size="16"></u-icon>
				</view>
			</view>
			<view class="flex items-center gap-2" style="height: 10px;">
				<view class="border-b" style="height: 1px;border-color: #49495F;width: 480rpx;"></view>
				<view class="iconfont icon-huazhuan text-xl text-white" @click="diandaoFn"></view>
				<view class="border-b flex-1" style="height: 1px;border-color: #49495F;"></view>
			</view>
			<view>
				<view>{{$t('huazhuan.zhi')}}</view>
				<view class="text-lg text-white flex gap-2" @click="selectpicker('bottom')">
					{{action2.list[0][action2.index].name}} 
					<u-icon name="arrow-right" color="#9FA6B5" size="16"></u-icon>
				</view>
			</view>
			
			<view class="text-xs flex justify-between py-4 mt-4">
				<view>{{$t('huazhuan.huazhuanbizhong')}}</view>
				<view class="flex text-white gap-2">
					USDT
					<u-icon name="arrow-right" color="#9FA6B5" size="12"></u-icon>
				</view>
			</view>
			
			<view class="text-xs flex justify-between py-4">
				<view>{{$t('huazhuan.huazhuanbizhong')}}</view>
				<view class="flex gap-2">
					{{$t('huazhuan.yuer')}}：0
				</view>
			</view>
			<view class="flex items-center w-full">
				<view style="background-color: #242424;" class="p-4 py-2 rounded-md w-full">
					<u--input placeholder="0.00" border="none" color="#909399"
					    v-model="input"
					></u--input>
				</view>
				<view class="px-2">|</view>
				<view class="green flex whitespace-nowrap">{{$t('bibi.quanbu')}}</view>
			</view>
			<view class="mt-8">
				<u-button :text="$t('huazhuan.queding')" shape="circle" style="height: 40px;"></u-button>
			</view>
		</view>
		<!-- 从-至 -->
		<u-picker :defaultIndex="[action.index]" :show="action.show" :columns="action.list" keyName="name" @cancel="action.show=false"
			@confirm="selectAction" @close="action.show=false" closeOnClickOverlay></u-picker>
		<u-picker :defaultIndex="[action2.index]" :show="action2.show" :columns="action2.list" keyName="name" @cancel="action2.show=false"
			@close="action2.show=false" closeOnClickOverlay></u-picker>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api', 'config']),
		},
		components: {
		},
		data() {
			return {
				input:'',
				action: {
					index:0,// 默认选中第一个
					show: false,
					list: [
						[
							{name: this.$t('huazhuan.zhanghuzichan'),id: '0'},
							{name: this.$t('zichan.heyuezhanghu'),id: '1'}
						]
					]
				},
				action2: {
					index:0,// 默认选中第一个
					show: false,
					list: []
				},
			}
		},
		onLoad(op) {
			this.initaction2()
		},
		onReady() {},
		methods: {
			// 选择账户
			selectpicker(type){
				if(type=='top'){
					this.action.show=true
				}else{
					this.action2.show=true
					this.initaction2()
				}
			},
			initaction2(){
				this.action2.list = [this.action.list[0].filter(item=>item.name!=this.action.list[0][this.action.index].name)]
			},
			//选择
			selectAction(e) {
				console.log(e);
				this.action.index = e.indexs[0]
				this.initaction2()
			},
			// 颠倒
			diandaoFn(){
				if(this.action.index==0){
					this.action.index = 1
				}else{
					this.action.index = 0
				}
				this.initaction2()
			}
		}
	}
</script>

<style lang="scss">
</style>